/* Node Wrapper */
.nodeWrapper {
    position: relative;
    width: 100%;
    min-height: 20px;
}

/* Handles Wrapper */
.handlesWrapper {
    display: flex;
    width: 100%;
}

/* Handles Columns */
.handlesColumn {
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inputHandlesColumn {
    align-items: flex-start;
}

.outputHandlesColumn {
    align-items: flex-end;
}

/* Handle Row */
.handleRow {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}

/* Handle Cell */
.handleCell {
    display: flex;
    justify-content: center;
    align-items: center;
}

.inputHandleCell {
    margin-right: 0.5rem;
}

.outputHandleCell {
    margin-left: 0.5rem;
}

/* Handle Label Cell */
.handleLabelCell {
    display: flex;
    align-items: center;
}

.inputHandlesColumn .handleLabelCell {
    margin-left: 0.5rem;
}

.outputHandlesColumn .handleLabelCell {
    margin-right: 0.5rem;
}

/* Handle Label */
.handleLabel {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    z-index: 1000;
}

/* Handle */
.handle {
    width: 0.8rem !important;
    height: 0.8rem !important;
    background: #555 !important;
    position: relative;
    z-index: 1001 !important;
    top: auto;
    right: auto;
    transform: none;
}

.handle:hover {
    background-color: #777;
}

/* Left and Right Handles */
.handleLeft {
    /* Additional styles for left handles if needed */
}

.handleRight {
    /* Additional styles for right handles if needed */
}

/* Collapsed Handles */
.collapsedHandleInput {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
}

.collapsedHandleOutput {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    transform: translateY(-50%) !important;
}

/* Dynamic Node Wrapper */
.baseNodeWrapper {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adjustments for Conditional Node */
.RouterNode {
    background-color: #e0f7fa;
}
